<template>
  <div class="box111">
    <v-chart :option="getOption()"></v-chart>
  </div>
</template>

<script setup lang="ts">
const getOption = () => {
  return {
    //x轴组件
    xAxis: {
      //隐藏x轴
      show: false,
      //设置x轴的最小数值
      min: 0,
      max: 100,
    },
    //y轴组件
    yAxis: {
      //隐藏y轴
      show: false,
      //y轴均匀分布
      type: "category",
    },
    //系列之柱状图
    series: {
      type: "bar",
      //柱状图的颜色
      color: "yellowgreen",
      data: [40],
      //柱状图的宽度的设置
      barWidth: 10,
      //柱状图底部的背景颜色
      showBackground: true,
      backgroundStyle: {
        color: "#eee",
      },
      //图形文本标签
      label: {
        show: true,
        //文本标签位置的设置
        position: "right",
        //文本标签内容的设置
        // formatter: "|",
        //文本标签文字的颜色
        color: "yellowgreen",
      },
    },
    //布局的调整
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  };
};

defineProps([""]);
</script>

<style scoped>
.box111 {
  width: 100%;
  height: 100%;
}
</style>